<template>
    <div>
        <el-form ref="form" :rules="formrules" :model="form" label-width="100px">
            <div class="padding_16 clearfix">
                <div class="fl" style="width: 70%;">
                    <el-form-item label="昵称：">
                        <el-input v-model="form.u_nickname" placeholder="请输入昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称：" prop="u_enterprise_name">
                        <el-input v-model="form.u_enterprise_name" placeholder="请输入公司名称"></el-input>
                    </el-form-item>
                    <el-form-item label="所在地：" prop="u_province">
                        <el-select v-model="form.u_province" placeholder="请选择" @change="provinceChange" style="width: 49%;">
                            <el-option v-for="(item,index) in pervinceOpt" :key="index" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <el-select v-model="form.u_city" placeholder="请选择" style="width: 50%;">
                            <el-option v-for="(item,index) in cityOpt" :key="index" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="企业规模：">
                        <el-select v-model="form.u_enterprise_scale" placeholder="请选择" style="width: 100%;">
                            <el-option v-for="(item,index) in scaleOpt" :key="index" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="成立时间：" prop="u_enterprise_time">
                        <el-date-picker v-model="form.u_enterprise_time" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="详细地址：" prop="u_enterprise_address">
                        <el-input v-model="form.u_enterprise_address" placeholder="请输入详细地址"></el-input>
                    </el-form-item>
                    <el-form-item label="企业网站：">
                        <el-input v-model="form.u_enterprise_website" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="注册资金：" prop="u_registered_capital">
                        <el-input type="number" placeholder="请输入" v-model="form.u_registered_capital">
                            <template slot="append">万元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="法人名称：">
                        <el-input v-model="form.u_legal_person" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="企业电话：">
                        <el-input type="number" v-model="form.u_enterprise_phone" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="企业邮箱：" prop="u_enterprise_email">
                        <el-input v-model="form.u_enterprise_email" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="企业介绍：">
                        <el-input v-model="form.u_enterprise_info" placeholder="请输入"></el-input>
                    </el-form-item>
                </div>
                <div class="fr" style="width: 28%;">
                    <div class="base-info-box-header-icon centerauto">
                        <el-upload ref="upload" class="avatar-uploader" :show-file-list="false" action="uploadUrl" :http-request="uploadSectionFile" :on-success="uploadSuccess">
                            <img v-if="form.u_head_portrait" :src="id_positive" class="avatar">
                            <img v-else src="../../../assets/images/userPic.png"/>
                        </el-upload>
                    </div>
                </div>
            </div>
            <div class="text-center" style="padding-bottom: 50px;">
                <el-button type="primary" @click="onSubmit('form')" class="btn_200">保存</el-button>
                <router-link to="/company/companyinfo"><el-button class="btn_200">取消</el-button></router-link>
            </div>
        </el-form>
    </div>
</template>
<script>

    export default {
        data(){
            return{
                form: {
                    'u_nickname': '',
                    'u_head_portrait': '',
                    'u_enterprise_name': '',
                    'u_province': '',
                    'u_city': '',
                    'u_enterprise_scale': '',
                    'u_enterprise_time': '',
                    'u_enterprise_address': '',
                    'u_enterprise_website': '',
                    'u_registered_capital': '',
                    'u_enterprise_phone': '',
                    'u_enterprise_email': '',
                    'u_legal_person': '',
                    'u_enterprise_info': '',
                },
                formrules:{
                    'u_enterprise_name': [
                        { required: true, message: '请输入公司名称', trigger: 'blur' }
                    ],
                    'u_province': [
                        { required: true, message: '请选择省市', trigger: 'change' }
                    ],
                    'u_city': [
                        { required: true, message: '请选择市/区', trigger: 'change' }
                    ],
                    'u_enterprise_time': [
                        { required: true, message: '请选择成立时间', trigger: 'change' }
                    ],
                    'u_enterprise_address': [
                        { required: true, message: '请输入详细地址', trigger: 'blur' }
                    ],
                    'u_registered_capital': [
                        { required: true, message: '请输入注册资金', trigger: 'blur' }
                    ],
                    'u_enterprise_email': [
                        { required: true, message: '请输入企业邮箱', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                },
                infoData: {},
                pervinceOpt: [],  //省下拉
                cityOpt: [],  //市下拉
                scaleOpt: [
                    {'name': '20人以下','id': 1},
                    {'name': '20-99人','id': 2},
                    {'name': '100-499人','id': 3},
                    {'name': '500-999人','id': 4},
                    {'name': '1000-9999人','id': 5},
                    {'name': '10000人以上','id': 6},
                ],
                id_positive: '',  //头像
                newAddress: '',  //头像  需要上传的地址
            }
        },
        methods: {
            init(){

                var _this = this;

                this.$httpGet('/api/index/Personal_center/enterpriseInfo',{
                    'u_id': window.localStorage.uid,
                }).then(response => {
                    
                    if(response.code == 200){

                        _this.infoData = response.msg;
                        _this.form.u_nickname = response.msg.u_nickname;
                        if(response.msg.u_head_portrait){
                            _this.id_positive = response.msg.yuming + response.msg.u_head_portrait;
                        }
                        
                        _this.form.u_head_portrait = response.msg.u_head_portrait;
                        _this.form.u_enterprise_name = response.msg.u_enterprise_name;
                        _this.form.u_province = response.msg.u_province;
                        if(response.msg.u_province){
                            _this.provinceChange(response.msg.u_province);
                        }
                        
                        _this.form.u_city = response.msg.u_city;
                        
                        _this.form.u_enterprise_scale = response.msg.u_enterprise_scale;
                        _this.form.u_enterprise_time = response.msg.u_enterprise_time;
                        _this.form.u_enterprise_address = response.msg.u_enterprise_address;
                        _this.form.u_enterprise_website = response.msg.u_enterprise_website;
                        _this.form.u_registered_capital = response.msg.u_registered_capital;
                        _this.form.u_enterprise_phone = response.msg.u_enterprise_phone;
                        _this.form.u_enterprise_email = response.msg.u_enterprise_email;
                        _this.form.u_legal_person = response.msg.u_legal_person;
                        _this.form.u_enterprise_info = response.msg.u_enterprise_info;
                        
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });

                this.pervinceFun();  //省下拉
            },
            //提交表单
            onSubmit(formName){
                var _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        
                        _this.form.u_id = window.localStorage.uid;
                        
                        this.$httpPost('/api/index/Personal_center/UpdateInfo',_this.form).then(response => {

                            if(response.code == 200){
                                
                                this.$message({
                                    message: response.msg,
                                    type: 'success'
                                });
                                setTimeout(() => {
                                    _this.$router.push({
                                        path: '/company/companyinfo'
                                    })
                                }, 2000);
                                
                            }else{
                                this.$message({
                                    message: response.msg,
                                    type: 'warning'
                                });
                            }

                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            //省下拉
            pervinceFun(){
                var _this = this;
                // 省下拉
                this.$httpGet('/api/index/Personal_center/pervincelist').then(response => {

                    if(response.code == 200){
                        
                        _this.pervinceOpt = response.msg;
                        
                    }

                });
            },
            // 省   change
            provinceChange(id){
                
                var _this = this;

                _this.form.u_city = '';
                // 市下拉
                this.$httpGet('/api/index/Personal_center/citylist',{'pid': id}).then(response => {

                    if(response.code == 200){
                        
                        _this.cityOpt = response.msg;
                        _this.form.u_city = response.msg[0].id;
                        
                    }

                });
            },
            //自定义上传
            uploadSectionFile(file){
                
                var _this = this;

                const formData = new FormData();
                formData.append('files', file.file);
                formData.append('uid', window.localStorage.uid);
                
                this.$httpPost('/api/index/Feedback/uploadImgs',formData).then(response => {

                    if(response.code == 200){

                        this.$message({
                            message: response.msg,
                            type: 'success'
                        });
                        
                        _this.form.u_head_portrait = response.newAddress;

                        file.onSuccess();

                    }else if(response.code == 301){
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                        _this.$refs.upload.clearFiles();
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //上传成功
            uploadSuccess(type, file, fileList) {
                this.id_positive = URL.createObjectURL(file.raw);
            },
        },
        mounted(){
            this.init();
        },
    }
</script>
